<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="../../js/lib/theme-chalk/index.css" />
		<link rel="stylesheet" type="text/css" href="../../css/myCustomer.css" />
		<link rel="stylesheet" type="text/css" href="../../css/my_commont.css" />
		<link rel="stylesheet" type="text/css" href="index.css" />

		<script src="../../common/utilCookie.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../common/author.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/axios.min.js"></script>
		<script src="../../js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入组件库 -->
		<script src="../../js/lib/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/config.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../common/judegetEmpty.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/aixos-init.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../common/math.js" type="text/javascript" charset="utf-8"></script>
		<script src="index.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			[v-cloak] {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="addGoodApp" v-cloak>
			<div class="contaner contaner-scorll-no" v-loading.fullscreen.lock="fullscreenLoading">
				<div class="step-main-contaner">
					<!-- 步骤 -->
					<div>
						<el-steps :active="index">
							<el-step title="1､选择商品分类"></el-step>
							<el-step title="2､填写商品信息基础信息并发布商品"></el-step>
							<el-step title="3､添加商品规格"></el-step>
						</el-steps>
					</div>

					<!-- 设置商品分类 -->
					<div class="stepContaner" v-if="index == 1">
						<hr class="hr-style" />
						<p>您当前选择的商品类别是：<span class="categoryStyle">{{value}}</span></p>
						<div class="tip-contaner">
							<el-col :span="15">
								<el-cascader-panel :options="options" v-model="districtDefault" @change="handleChange"></el-cascader-panel>
							</el-col>
						</div>
					</div>
					<!-- 填写商品信息 -->
					<div class="stepContaner" v-else-if="index == 2">
						<hr class="hr-style" />
						<div class="section-header">
							通用信息
						</div>
						<hr class="hr-style" />
						<div class="good-common-info">
							<el-form ref="form" :model="form" label-width="160px">

								<el-form-item label="商品分类">
									<span>{{form.name}}</span>
								</el-form-item>
								<el-row>
									<el-col :span="11">
										<el-form-item label="商品名称:" prop="goodName">
											<el-input v-model="form.goodName" placeholder="商品名称不能为空"></el-input>
										</el-form-item>
										<div class="tip-item tip-item-height">
											<span>商品标题名称长度至少1个字符，最长150个汉字 最多输入40字</span>
										</div>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="11">
										<el-form-item label="商品售价(单位:¥):" prop="newPrice">
											<el-input v-model="form.newPrice" placeholder="商品售价不能为空"></el-input>
										</el-form-item>
										<div class="tip-item tip-item-height">
											<span>只保留两位小数,此价格为商品实际销售价格，如果商品存在规格价格，该价格显示最低价格。</span>
										</div>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="11">
										<el-form-item label="成本价(单位:¥):" prop="oldPrice">
											<el-input v-model="form.oldPrice" placeholder="成本价不能为空"></el-input>
										</el-form-item>
										<div class="tip-item tip-item-height">
											<span>只保留两位小数,此价格为商品成本价。</span>
										</div>

									</el-col>
								</el-row>
								<el-row>
									<el-col :span="11">
										<el-form-item label="商品库存数量:">
											<el-input v-model.number="form.inventory" placeholder="请输入数字"></el-input>
										</el-form-item>
										<div class="tip-item tip-item-height">
											<span>商铺库存数量必须为0~999999999之间的整数</span>
										</div>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="11">
										<el-form-item label="库存警告数量:">
											<el-input v-model.number="form.warnInventory" placeholder="请输入数字"></el-input>
										</el-form-item>
										<div class="tip-item tip-item-height">
											<span>设置最低库存预警值。当库存低于预警值时商家中心商品列表页库存列红字提醒，请填写0~255的数字，0为不预警。</span>
										</div>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="11">
										<el-form-item label="商品封面图：">
											<el-upload ref="coverUpload" :action='uploadUrl' :before-remove="beforeAvaterRemove" :file-list="fileAvatarList"
											 :on-success="handleCoverSuccess" list-type="picture" :limit='1' :on-exceed="handleCoverExceed">
												<el-button slot="trigger" size="small" type="primary"><i class="el-icon-upload el-icon--right"></i>&nbsp;选取图片</el-button>
											</el-upload>
										</el-form-item>
										<div class="tip-item tip-item-height">
											<span>商品封面图，最多1张</span>
										</div>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="11">
										<el-form-item label="商品轮播图：">
											<el-upload ref="carouselUpload" :action='uploadUrl' :before-remove="beforeCourseRemove" :file-list="carouseImgUrl"
											 :on-success="handleCarouselSuccess" list-type="picture" :limit='5' :on-exceed="handleCarouseExceed">
												<el-button slot="trigger" size="small" type="primary"><i class="el-icon-upload el-icon--right"></i>&nbsp;选取图片</el-button>
											</el-upload>
										</el-form-item>
										<div class="tip-item tip-item-height">
											<span>商品轮播图最多5张</span>
										</div>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="11">
										<el-form-item label="商品详情图：">
											<el-upload ref="detailUpload" :action='uploadUrl' :before-remove="beforeDetailRemove" :file-list="detailImgUrl"
											 :on-success="handleDetailSuccess" list-type="picture" :limit='5' :on-exceed="handleDetailExceed">
												<el-button slot="trigger" size="small" type="primary"><i class="el-icon-upload el-icon--right"></i>&nbsp;选取图片</el-button>
											</el-upload>
										</el-form-item>
										<div class="tip-item tip-item-height">
											<span>商品详情页图片最多5张</span>
										</div>
									</el-col>
								</el-row>
							</el-form>
						</div>
						<!-- 	其他信息 -->
						<div class="section-header">
							其他信息
						</div>
						<hr class="hr-style" />
						<div class="good-common-info">
							<div class="my_height_20">
								<el-form ref="form2" :model="form" label-width="120px">
									<el-row>
										<el-col :span="11">
											<el-form-item label="商品单位">
												<el-input v-model="form.unit"></el-input>
											</el-form-item>
											<div class="tip-item tip-item-height">
												<span>商品单位：比如：个，件，份，套。默认为个</span>
											</div>
										</el-col>
									</el-row>
									<div class="good-common-info">
										<el-button type="primary" @click="releaseGood">发布商品</el-button>
									</div>
									<div class="tip-item tip-item-height">
										<span>商品发布后,可在商品列表编辑里编辑商品，也可以点击下一步添加商品规格</span>
									</div>

								</el-form>
							</div>
						</div>
					</div>

					<!-- 设置商品分类 -->
					<div class="stepContaner" v-if="index == 3">
						<hr class="hr-style" />
						<div class="my_height_20">
							<el-form ref="goodPropFrom" :model="goodPropFrom" label-width="180px">
								<el-row>
									<el-col :span="11">
										<el-form-item label="商品规格价格(单位:¥):" prop="price">
											<el-input v-model="goodPropFrom.price"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="11">

										<el-form-item label="商品规格参数:">
											<div v-for="(item,key)  in goodPropList" :key="key">
												<p>{{item.name}}</p>
												<el-radio-group v-model="item.select">
													<el-radio v-for="data in item.options" :label=data.name>{{data.name}}</el-radio>
												</el-radio-group>
											</div>
										</el-form-item>
										<div class="tip-item tip-item-height">
											<span>规格可多选,如果规格参数为空请先到商品规格库添加该分类的规格</span>
										</div>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="11">
										<el-form-item label="商品规格库存数量:">
											<el-input v-model.number="goodPropFrom.inventory"></el-input>
										</el-form-item>
										<div class="tip-item tip-item-height">
											<span>商铺库存数量必须为0~999999999之间的整数</span>
										</div>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="11">
										<el-form-item label="商品规格封面图：">
											<el-upload ref="categoryCoverUpload" :action='uploadUrl' :before-remove="beforePropRemove" :file-list="propImgUrl"
											 list-type="picture" :limit='1' :on-exceed="handleCategoryCoverExceed" :on-success="handleCategoryCoverSuccess">
												<el-button slot="trigger" size="small" type="primary"><i class="el-icon-upload el-icon--right"></i>&nbsp;选取图片</el-button>

											</el-upload>
										</el-form-item>
										<div class="tip-item tip-item-height">
											<span>商品详情页的缩略图片图片，最多1张</span>
										</div>
									</el-col>
								</el-row>
								<el-row>
									<el-button @click="getSelectGoodCategory">添加规格</el-button>
								</el-row>
							</el-form>
						</div>
						<p class="tip-header-title">添加完成后此商品的所有规格列表:</p>
						<div class="my_height_10">
							<el-table border :data="goodPropTableData" style="width: 100%">
								<el-table-column prop="combination" label="规格名称" width="180">
								</el-table-column>
								<el-table-column prop="price" label="价格">
								</el-table-column>
								<el-table-column prop="inventory" label="库存">
								</el-table-column>
								<el-table-column label="操作">
									<template slot-scope="scope">
										<el-button @click.native.prevent="deleteGoodPropRow(scope.row)" type="text" size="small">
											移除
										</el-button>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</div>

				</div>
				<div class="tip-footer">
					<div class="tip-footer-contaner">

						<el-button @click="lastStep" v-if="index >=1">上一步</el-button>
						<el-button @click="nextStep" type="primary" v-if="index <3">下一步</el-button>
					</div>

				</div>
			</div>
		</div>
	</body>
</html>
